<template>
    <CommonModal v-model:show="modalShow" :title="modalTitle" @onSubmit="onSubmit" style="width: 600px">
        <n-form
        ref="modalFormRef"
        :model="modalForm"
        :inline="false"
        :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="资源类型" path="resourceName">
          <n-select :options="remoteResourceType" v-model:value="modalForm.type">
          </n-select>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="资源名称" path="resourceName">
          <n-input v-model:value="modalForm.resourceName" clearable placeholder="请输入资源名称"/>

        </n-form-item-gi>
        <n-form-item-gi :span="24" label="是否公开" path="isPublic">
          <n-select :options="isPublicOption" v-model:value="modalForm.isPublic">
          </n-select>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="HOST" path="host">
          <n-input v-model:value="modalForm.host" clearable placeholder="请输入HOST"/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="端口" path="port">
          <n-input-number v-model:value="modalForm.port" clearable placeholder="请输入端口号"/>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="文生图地址" path="txt2ImgApiPath">
          <n-input v-model:value="modalForm.txt2ImgApiPath" clearable placeholder="请输入地址"/>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="图生图地址" path="img2ImgApiPath">
          <n-input v-model:value="modalForm.img2ImgApiPath" clearable  placeholder="请输入地址"/>
        </n-form-item-gi>

        <n-form-item-gi :span="24" label="资源状态" path="status">
          <n-select :options="statusOption" v-model:value="modalForm.status">
          </n-select>
        </n-form-item-gi>


        <n-form-item-gi :span="8" label="默认资源" path="isDefault">
          <n-radio-group
              v-model:value="modalForm.isDefault"
              name="left-size"
              style="margin-bottom: 12px"
              default-value="0"
          >
            <n-radio-button value="1">
              是
            </n-radio-button>
            <n-radio-button value="0">
              否
            </n-radio-button>
          </n-radio-group>
        </n-form-item-gi>

        <n-form-item-gi :span="8" label="是否需要验证" path="isAuth">
          <n-radio-group
              v-model:value="modalForm.isAuth"
              name="left-size"
              style="margin-bottom: 12px"
              default-value="0"
          >
            <n-radio-button value="1">
              是
            </n-radio-button>
            <n-radio-button value="0">
              否
            </n-radio-button>
          </n-radio-group>
        </n-form-item-gi>

        <n-form-item-gi :span="8" label="是否使用HTTPS" path="needSsl">
          <n-radio-group
              v-model:value="modalForm.needSsl"
              name="left-size"
              style="margin-bottom: 12px"
              :default-value="false"
          >
            <n-radio-button :value = 'true'>
              是
            </n-radio-button>
            <n-radio-button :value="false">
              否
            </n-radio-button>
          </n-radio-group>
        </n-form-item-gi>
        <n-form-item-gi v-if="modalForm.isAuth === '1'" :span="12" label="账号" path="username">
          <n-input v-model:value="modalForm.username" clearable placeholder="请输入账号"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="modalForm.isAuth === '1'" :span="12" label="密码" path="password">
          <n-input v-model:value="modalForm.password" clearable placeholder="请输入密码"/>
        </n-form-item-gi>

        <n-form-item-gi :span="8" label="并发数" path="password">
          <n-input-number v-model:value="modalForm.coreSize" default-value="3" clearable placeholder="请输入并发数"/>
        </n-form-item-gi>
        <n-form-item-gi :span="8" label="队列长度" path="password">
          <n-input-number v-model:value="modalForm.queueSize" default-value="50" clearable placeholder="请输入队列长度"/>
        </n-form-item-gi>
        <n-form-item-gi :span="8" label="超时时间" path="password">
          <n-input-number v-model:value="modalForm.timeoutMinutes" default-value="10" clearable placeholder="请输入超时时间">
            <template #suffix>
              分钟
            </template>
          </n-input-number>
        </n-form-item-gi>



      </n-grid>
    </n-form>
    </CommonModal>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import CommonModal from "@/components/commonModal/index.vue";
import {useCommonModal} from "@/components/commonModal/useCommonModal";
import { resourceController } from "@/api/resource/resourceController.api";
import {remoteResourceType,statusOption,isPublicOption} from '@/views/resource'
export default defineComponent({
    name: "UserEditForm",
    components: {
        CommonModal,remoteResourceType,statusOption,isPublicOption
    },
    setup() {
        const {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds
        } = useCommonModal("Fooocus", {
                coreSize : 3,
                queueSize : 50,
                timeoutMinutes : 10,
                txt2ImgApiPath : '/sdapi/v1/txt2img',
                img2ImgApiPath : '/sdapi/v1/img2img',
                needSsl: false,
                isAuth: "0",
                type: "Fooocus",
            },
            resourceController.addSDResource,
            resourceController.updateResource,resourceController.deleteResource,resourceController.deleteBatch
        )

        const rules = {
            resourceName: {type: "string", required: true, message: "请输入资源名称", trigger: ["blur", "change"]},
            host: {type: "string", required: true, message: "请输入资源host", trigger: ["blur", "change"]},
            port: {type: "number", required: true, message: "请输入资源端口号", trigger: ["blur", "change"]},
            txt2ImgApiPath: {type: "string", required: true, message: "请输入地址", trigger: ["input", "blur"]},
            img_img_path: {type: "string", required: true, message: "请输入地址", trigger: ["input", "blur"]}
        }


        return {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            rules,
            remoteResourceType,
            statusOption,
            isPublicOption,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds
        }
    }
})
</script>

<style scoped>

</style>
